<template>
  <a-card :border="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" :form="form">
        <a-row :gutter="20">
          <a-col :xxl="6" :xl="6" :lg="10" :sm="24">
            <a-form-item label="小程序">
              <a-select v-decorator="['brandId']" placeholder="请选择小程序">
                <a-select-option value="">全部</a-select-option>
                <a-select-option v-for="item in brands" :key="item.weid" :value="item.weid">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="6" :lg="10" :sm="24">
            <a-form-item label="路径">
              <a-input placeholder="请输入路径" v-decorator="['url']" @pressEnter="loadData(1)" />
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="6" :lg="10" :sm="24">
            <a-form-item label="页面名称">
              <a-input placeholder="请输入页面名称" v-decorator="['monitorLinkName']" @pressEnter="loadData(1)" />
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="6" :lg="10" :sm="24">
            <a-form-item label="投放渠道">
              <a-input placeholder="请输入投放渠道" v-decorator="['putChannel']" @pressEnter="loadData(1)" />
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="6" :lg="10" :sm="24">
            <a-form-item label="备注">
              <a-input placeholder="请输入备注" v-decorator="['note']" @pressEnter="loadData(1)" />
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="6" :lg="10" :sm="24">
            <a-button class="btn" type="primary" @click="search">搜索</a-button>
            <a-button class="btn" type="primary" @click="reset">重置</a-button>
            <a-button type="primary" @click="addLink">新增</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-spin :spinning="spanLoading">
      <a-table bordered :columns="columns" :rowKey="(record) => record.id" :data-source="dataSource"
        :pagination="pagination" :scroll="{ x: true }" @change="handleTableChange" :loading="loading">
        <span slot="brand" slot-scope="text, record">{{ queryBrand(record.brandId) }}</span>
        <template slot="actions" slot-scope="text, record">
          <a-button type="link" @click="launch(record)">投放</a-button>
          <a-button type="link" @click="deleteChannelHandle(record.id)">删除</a-button>
        </template>
      </a-table>
    </a-spin>
    <lannchModal :visible.sync="showModal" :launchObj="launchObj" />
  </a-card>
</template>

<script>
import { listMixin } from "../../micromall/util/listMixin";
import { brands } from "../../micromall/util/brand";
import { postAction } from "@/api/manage";
import { queryResult } from "@/api/micromall/box.js";

import { deleteChannel } from "@/api/operateTools/channel";
import lannchModal from "./launchModal.vue"
import moment from "moment";
const columns = [
  {
    title: "编号",
    width: 100,
    align: "center",
    dataIndex: "id",
  },
  {
    title: "小程序",
    width: 100,
    align: "center",
    scopedSlots: { customRender: 'brand' }
  },
  {
    title: "页面名称",
    width: 180,
    align: "center",
    dataIndex: "monitorLinkName",
  },
  {
    title: "投放渠道",
    width: 100,
    align: "center",
    dataIndex: "putChannel",
  },
  {
    title: "备注",
    width: 100,
    align: "center",
    dataIndex: "note",
  },
  {
    title: "创建时间",
    width: 180,
    align: "center",
    dataIndex: "createTime",
  },
  {
    title: "创建人",
    width: 100,
    align: "center",
    dataIndex: 'createName'
  },
  {
    title: "操作",
    width: 250,
    align: "center",
    scopedSlots: { customRender: "actions" },
  },
];
export default {
  name: "",
  mixins: [listMixin],
  components: {
    lannchModal
  },
  data() {
    return {
      statusList: [
        { key: 0, name: "启用" },
        { key: 1, name: "禁用" },
      ],
      btnLoading: false,
      loading: false,
      columns,
      brands,
      dataSource: [],
      url: {
        list: "/jic-backend-activity/monitor/link/page",
      },
      count: 0,
      spanLoading: false,
      showModal: false,
      launchObj: null
    };
  },
  computed: {
    queryBrand() {
      return function (weid) {
        return this.brands.find(item => item.weid == weid).name
      }
    }
  },
  methods: {

    launch(record) {
      const { url, parameterUrl, codeUrl } = record
      this.launchObj = { url, parameterUrl, codeUrl }
      this.showModal = true
    },
    async deleteChannelHandle(id) {
      this.$confirm({
        title: "提示",
        content: "确认要删除该数据吗",
        onOk: async () => {
          const res = await deleteChannel({id});
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.loadData();
          } else {
            this.$message.error(res.msg);
          }
        },
        onCancel() { },
      });
    },

    loadData(arg) {
      if (!this.url.list) {
        this.$message.error("请设置url.list属性!");
        return;
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.pagination.current = 1;
      }
      var params = this.getQueryParams(); //查询条件
      console.log(params)
      this.spanLoading = true;
      postAction(this.url.list, params)
        .then((res) => {
          this.spanLoading = false;
          if (res.code == 200) {
            //update-end---author:wsp    Date:20210826
            this.dataSource = res.data.records || res.data;
            if (res.data.total) {
              this.pagination.total = res.data.total;
            } else {
              this.pagination.total = 0;
            }
          } else {
            this.$message.warning(res.msg);
          }
          this.loading = false;
        })
        .catch((err) => {
          this.spanLoading = false;
          console.log(err);
        });
    },
    addLink() {
      this.$router.push("/marketingCenter/otherTools/channelLink/edit");
    },

    reset() {
      this.form.resetFields();
      this.loadData(1);
    },
    search() {
      this.loadData(1);
    },
  },
};
</script>

<style scoped>
.btn {
  margin-right: 10px;
}
</style>
